<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>精美的动画购物页面</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        :root {
            --primary-color: #ff6b6b;
            --secondary-color: #4ecdc4;
            --accent-color: #ffe66d;
            --dark-color: #292f36;
            --light-color: #f7fff7;
            --gray-color: #f0f0f0;
            --text-color: #333;
        }
        
        body {
            background-color: var(--light-color);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
        }
        
        /* 导航栏样式 */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            background-color: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            z-index: 1000;
            transition: all 0.3s ease;
        }
        
        .navbar-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px;
            max-width: 1400px;
            margin: 0 auto;
        }
        
        .logo {
            font-size: 1.8rem;
            font-weight: bold;
            color: var(--primary-color);
            text-decoration: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .logo:hover {
            transform: scale(1.05);
        }
        
        .logo-icon {
            font-size: 2rem;
        }
        
        .nav-links {
            display: flex;
            list-style: none;
            gap: 20px;
        }
        
        .nav-links a {
            text-decoration: none;
            color: var(--text-color);
            font-weight: 500;
            transition: all 0.3s ease;
            position: relative;
            padding: 5px 0;
        }
        
        .nav-links a:hover {
            color: var(--primary-color);
        }
        
        .nav-links a::after {
            content: '';
            position: absolute;
            width: 0;
            height: 2px;
            bottom: 0;
            left: 0;
            background-color: var(--primary-color);
            transition: width 0.3s ease;
        }
        
        .nav-links a:hover::after {
            width: 100%;
        }
        
        .nav-actions {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        .search-container {
            position: relative;
            display: flex;
            align-items: center;
        }
        
        .search-input {
            padding: 8px 15px;
            border: 2px solid var(--gray-color);
            border-radius: 20px;
            outline: none;
            transition: all 0.3s ease;
            width: 200px;
        }
        
        .search-input:focus {
            border-color: var(--primary-color);
            width: 250px;
        }
        
        .search-icon {
            position: absolute;
            right: 10px;
            color: #999;
        }
        
        .nav-btn {
            background: none;
            border: none;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .nav-btn:hover {
            transform: scale(1.1);
            color: var(--primary-color);
        }
        
        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background-color: var(--primary-color);
            color: white;
            font-size: 0.7rem;
            font-weight: bold;
            padding: 2px 6px;
            border-radius: 50%;
            min-width: 20px;
            text-align: center;
        }
        
        /* 移动端菜单按钮 */
        .mobile-menu-btn {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
        }
        
        /* 英雄区域 */
        .hero-section {
            margin-top: 80px;
            background: linear-gradient(135deg, #ff6b6b 0%, #ff9e7d 100%);
            background-size: 400% 400%;
            animation: gradientShift 15s ease infinite;
            color: white;
            padding: 60px 20px;
            position: relative;
            overflow: hidden;
        }
        
        @keyframes gradientShift {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .hero-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 40px;
        }
        
        .hero-content {
            flex: 1;
            min-width: 300px;
            z-index: 1;
        }
        
        .hero-title {
            font-size: 2.5rem;
            margin-bottom: 20px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s ease forwards;
        }
        
        .hero-subtitle {
            font-size: 1.2rem;
            margin-bottom: 30px;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s ease 0.2s forwards;
        }
        
        .hero-btn {
            background-color: white;
            color: var(--primary-color);
            border: none;
            padding: 12px 30px;
            font-size: 1rem;
            font-weight: 600;
            border-radius: 30px;
            cursor: pointer;
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.8s ease 0.4s forwards;
            position: relative;
            overflow: hidden;
        }
        
        .hero-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }
        
        .hero-btn::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 0;
            height: 0;
            border-radius: 50%;
            background: rgba(255, 107, 107, 0.1);
            transform: translate(-50%, -50%);
            transition: width 0.6s ease, height 0.6s ease;
        }
        
        .hero-btn:hover::before {
            width: 300px;
            height: 300px;
        }
        
        .hero-image {
            flex: 1;
            min-width: 300px;
            opacity: 0;
            transform: translateX(50px);
            animation: fadeInRight 0.8s ease 0.6s forwards;
        }
        
        .hero-image img {
            width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
        }
        
        /* 装饰元素 */
        .decorative-shape {
            position: absolute;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            animation: float 8s infinite ease-in-out;
        }
        
        .shape-1 {
            width: 200px;
            height: 200px;
            top: -50px;
            right: 10%;
        }
        
        .shape-2 {
            width: 150px;
            height: 150px;
            bottom: -50px;
            left: 15%;
            animation-delay: 2s;
        }
        
        @keyframes float {
            0%, 100% { transform: translate(0, 0) scale(1); }
            25% { transform: translate(20px, -20px) scale(1.05); }
            50% { transform: translate(0, 0) scale(1.1); }
            75% { transform: translate(-20px, 20px) scale(1.05); }
        }
        
        /* 分类区域 */
        .categories-section {
            padding: 60px 20px;
            background-color: white;
        }
        
        .section-title {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 40px;
            position: relative;
        }
        
        .section-title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
            border-radius: 2px;
        }
        
        .categories-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
            gap: 20px;
        }
        
        .category-card {
            background-color: var(--gray-color);
            border-radius: 10px;
            padding: 20px;
            text-align: center;
            transition: all 0.3s ease;
            cursor: pointer;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s ease forwards;
            position: relative;
            overflow: hidden;
        }
        
        .category-card:nth-child(1) { animation-delay: 0.1s; }
        .category-card:nth-child(2) { animation-delay: 0.2s; }
        .category-card:nth-child(3) { animation-delay: 0.3s; }
        .category-card:nth-child(4) { animation-delay: 0.4s; }
        .category-card:nth-child(5) { animation-delay: 0.5s; }
        .category-card:nth-child(6) { animation-delay: 0.6s; }
        
        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            background-color: var(--primary-color);
            color: white;
        }
        
        .category-icon {
            font-size: 2.5rem;
            margin-bottom: 10px;
            transition: all 0.3s ease;
        }
        
        .category-card:hover .category-icon {
            transform: scale(1.2) rotate(10deg);
        }
        
        .category-name {
            font-size: 1rem;
            font-weight: 600;
        }
        
        /* 产品区域 */
        .products-section {
            padding: 60px 20px;
            background-color: var(--light-color);
        }
        
        .products-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            gap: 30px;
        }
        
        .product-card {
            background-color: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s ease;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.6s ease forwards;
            position: relative;
        }
        
        .product-card:nth-child(1) { animation-delay: 0.1s; }
        .product-card:nth-child(2) { animation-delay: 0.2s; }
        .product-card:nth-child(3) { animation-delay: 0.3s; }
        .product-card:nth-child(4) { animation-delay: 0.4s; }
        
        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }
        
        .product-image {
            width: 100%;
            height: 200px;
            overflow: hidden;
            position: relative;
        }
        
        .product-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .product-card:hover .product-image img {
            transform: scale(1.1);
        }
        
        .product-discount {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: var(--primary-color);
            color: white;
            padding: 5px 10px;
            font-size: 0.8rem;
            font-weight: bold;
            border-radius: 20px;
        }
        
        .product-favorite {
            position: absolute;
            top: 10px;
            right: 10px;
            background-color: white;
            border: none;
            border-radius: 50%;
            width: 35px;
            height: 35px;
            cursor: pointer;
            font-size: 1rem;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .product-favorite:hover {
            background-color: var(--primary-color);
            color: white;
            transform: scale(1.1);
        }
        
        .product-content {
            padding: 20px;
        }
        
        .product-category {
            font-size: 0.85rem;
            color: #666;
            margin-bottom: 8px;
        }
        
        .product-title {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 10px;
            transition: color 0.3s ease;
        }
        
        .product-card:hover .product-title {
            color: var(--primary-color);
        }
        
        .product-rating {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .rating-stars {
            color: var(--accent-color);
            margin-right: 5px;
        }
        
        .rating-count {
            font-size: 0.85rem;
            color: #666;
        }
        
        .product-price {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }
        
        .current-price {
            font-size: 1.3rem;
            font-weight: bold;
            color: var(--primary-color);
            margin-right: 10px;
        }
        
        .original-price {
            font-size: 0.9rem;
            color: #999;
            text-decoration: line-through;
        }
        
        .product-buttons {
            display: flex;
            gap: 10px;
        }
        
        .add-to-cart-btn {
            flex: 1;
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        .add-to-cart-btn:hover {
            background-color: #ff5252;
            transform: translateY(-2px);
        }
        
        .view-details-btn {
            flex: 1;
            background-color: white;
            color: var(--primary-color);
            border: 1px solid var(--primary-color);
            padding: 10px;
            border-radius: 5px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 500;
        }
        
        .view-details-btn:hover {
            background-color: var(--primary-color);
            color: white;
            transform: translateY(-2px);
        }
        
        /* 特色产品区域 */
        .featured-products {
            padding: 60px 20px;
            background-color: white;
        }
        
        /* 页脚 */
        .footer {
            background-color: var(--dark-color);
            color: white;
            padding: 60px 20px 30px;
        }
        
        .footer-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 40px;
        }
        
        .footer-logo {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .footer-description {
            margin-bottom: 20px;
            color: #ccc;
        }
        
        .footer-social {
            display: flex;
            gap: 15px;
        }
        
        .social-link {
            background-color: rgba(255, 255, 255, 0.1);
            color: white;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.3s ease;
        }
        
        .social-link:hover {
            background-color: var(--primary-color);
            transform: translateY(-3px);
        }
        
        .footer-heading {
            font-size: 1.2rem;
            font-weight: 600;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }
        
        .footer-heading::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background-color: var(--primary-color);
        }
        
        .footer-links {
            list-style: none;
        }
        
        .footer-links li {
            margin-bottom: 10px;
        }
        
        .footer-links a {
            color: #ccc;
            text-decoration: none;
            transition: all 0.3s ease;
            display: inline-block;
        }
        
        .footer-links a:hover {
            color: white;
            transform: translateX(5px);
        }
        
        .footer-bottom {
            text-align: center;
            padding-top: 30px;
            margin-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            color: #ccc;
            font-size: 0.9rem;
        }
        
        /* 购物车侧边栏 */
        .cart-sidebar {
            position: fixed;
            top: 0;
            right: -400px;
            width: 400px;
            height: 100vh;
            background-color: white;
            box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
            transition: right 0.3s ease;
            z-index: 2000;
            display: flex;
            flex-direction: column;
        }
        
        .cart-sidebar.open {
            right: 0;
        }
        
        .cart-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-bottom: 1px solid var(--gray-color);
        }
        
        .cart-title {
            font-size: 1.2rem;
            font-weight: 600;
        }
        
        .close-cart {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .close-cart:hover {
            transform: scale(1.1) rotate(90deg);
            color: var(--primary-color);
        }
        
        .cart-items {
            flex: 1;
            overflow-y: auto;
            padding: 20px;
        }
        
        .cart-item {
            display: flex;
            gap: 15px;
            margin-bottom: 20px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--gray-color);
        }
        
        .cart-item-image {
            width: 80px;
            height: 80px;
            border-radius: 5px;
            overflow: hidden;
            flex-shrink: 0;
        }
        
        .cart-item-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .cart-item-details {
            flex: 1;
        }
        
        .cart-item-title {
            font-size: 0.95rem;
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .cart-item-price {
            color: var(--primary-color);
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .cart-item-quantity {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .quantity-btn {
            background-color: var(--gray-color);
            border: none;
            width: 25px;
            height: 25px;
            border-radius: 50%;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
        }
        
        .quantity-btn:hover {
            background-color: var(--primary-color);
            color: white;
        }
        
        .remove-item {
            background: none;
            border: none;
            color: #999;
            cursor: pointer;
            font-size: 1.2rem;
            transition: all 0.3s ease;
        }
        
        .remove-item:hover {
            color: var(--primary-color);
            transform: scale(1.1);
        }
        
        .cart-empty {
            text-align: center;
            padding: 40px 20px;
            color: #999;
        }
        
        .cart-footer {
            padding: 20px;
            border-top: 1px solid var(--gray-color);
            background-color: white;
        }
        
        .cart-summary {
            margin-bottom: 20px;
        }
        
        .summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
        }
        
        .summary-total {
            font-weight: bold;
            font-size: 1.1rem;
            color: var(--primary-color);
        }
        
        .checkout-btn {
            width: 100%;
            background-color: var(--primary-color);
            color: white;
            border: none;
            padding: 12px;
            border-radius: 5px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .checkout-btn:hover {
            background-color: #ff5252;
            transform: translateY(-2px);
        }
        
        /* 遮罩层 */
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s ease;
            z-index: 1500;
        }
        
        .overlay.active {
            opacity: 1;
            visibility: visible;
        }
        
        /* 动画关键帧 */
        @keyframes fadeInUp {
            0% {
                opacity: 0;
                transform: translateY(20px);
            }
            100% {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes fadeInRight {
            0% {
                opacity: 0;
                transform: translateX(50px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }
        
        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }
            
            .search-input {
                width: 150px;
            }
            
            .search-input:focus {
                width: 200px;
            }
            
            .mobile-menu-btn {
                display: block;
            }
            
            .categories-container {
                grid-template-columns: repeat(3, 1fr);
            }
            
            .products-container {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .cart-sidebar {
                width: 100%;
                right: -100%;
            }
        }
        
        @media (max-width: 480px) {
            .hero-title {
                font-size: 2rem;
            }
            
            .categories-container {
                grid-template-columns: repeat(2, 1fr);
            }
            
            .products-container {
                grid-template-columns: 1fr;
            }
            
            .product-buttons {
                flex-direction: column;
            }
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar">
        <div class="navbar-container">
            <a href="#" class="logo">
                <span class="logo-icon">🛒</span>
                ShopEase
            </a>
            
            <ul class="nav-links">
                <li><a href="#">首页</a></li>
                <li><a href="#products">商品</a></li>
                <li><a href="#categories">分类</a></li>
                <li><a href="#featured">特色</a></li>
                <li><a href="#">关于我们</a></li>
            </ul>
            
            <div class="nav-actions">
                <div class="search-container">
                    <input type="text" placeholder="搜索商品..." class="search-input">
                    <span class="search-icon">🔍</span>
                </div>
                
                <button class="nav-btn">
                    <span class="user-icon">👤</span>
                </button>
                
                <button class="nav-btn" id="cartBtn">
                    <span class="cart-icon">🛒</span>
                    <span class="cart-count" id="cartCount">0</span>
                </button>
                
                <button class="mobile-menu-btn">
                    <span>☰</span>
                </button>
            </div>
        </div>
    </nav>
    
    <!-- 英雄区域 -->
    <section class="hero-section">
        <div class="decorative-shape shape-1"></div>
        <div class="decorative-shape shape-2"></div>
        
        <div class="hero-container">
            <div class="hero-content">
                <h1 class="hero-title">探索无限购物乐趣</h1>
                <p class="hero-subtitle">发现最优质的商品，享受最便捷的购物体验，尽在ShopEase</p>
                <button class="hero-btn">立即购物</button>
            </div>
            
            <div class="hero-image">
                <img src="https://picsum.photos/id/26/800/600" alt="购物展示">
            </div>
        </div>
    </section>
    
    <!-- 分类区域 -->
    <section class="categories-section" id="categories">
        <h2 class="section-title">商品分类</h2>
        
        <div class="categories-container">
            <div class="category-card">
                <div class="category-icon">👕</div>
                <div class="category-name">时尚服饰</div>
            </div>
            
            <div class="category-card">
                <div class="category-icon">📱</div>
                <div class="category-name">电子产品</div>
            </div>
            
            <div class="category-card">
                <div class="category-icon">🏠</div>
                <div class="category-name">家居生活</div>
            </div>
            
            <div class="category-card">
                <div class="category-icon">📚</div>
                <div class="category-name">图书文具</div>
            </div>
            
            <div class="category-card">
                <div class="category-icon">🏃</div>
                <div class="category-name">运动户外</div>
            </div>
            
            <div class="category-card">
                <div class="category-icon">🎁</div>
                <div class="category-name">礼品鲜花</div>
            </div>
        </div>
    </section>
    
    <!-- 商品区域 -->
    <section class="products-section" id="products">
        <h2 class="section-title">热门商品</h2>
        
        <div class="products-container">
            <!-- 商品卡片 1 -->
            <div class="product-card">
                <div class="product-image">
                    <img src="https://picsum.photos/id/96/500/500" alt="商品图片">
                    <span class="product-discount">-20%</span>
                    <button class="product-favorite">❤️</button>
                </div>
                
                <div class="product-content">
                    <div class="product-category">电子产品</div>
                    <h3 class="product-title">无线蓝牙耳机</h3>
                    <div class="product-rating">
                        <div class="rating-stars">★★★★★</div>
                        <span class="rating-count">(128)</span>
                    </div>
                    <div class="product-price">
                        <span class="current-price">¥199.00</span>
                        <span class="original-price">¥249.00</span>
                    </div>
                    <div class="product-buttons">
                        <button class="add-to-cart-btn add-to-cart" data-id="1" data-name="无线蓝牙耳机" data-price="199" data-image="https://picsum.photos/id/96/500/500">加入购物车</button>
                        <button class="view-details-btn">查看详情</button>
                    </div>
                </div>
            </div>
            
            <!-- 商品卡片 2 -->
            <div class="product-card">
                <div class="product-image">
                    <img src="https://picsum.photos/id/21/500/500" alt="商品图片">
                    <button class="product-favorite">🤍</button>
                </div>
                
                <div class="product-content">
                    <div class="product-category">时尚服饰</div>
                    <h3 class="product-title">纯棉宽松T恤</h3>
                    <div class="product-rating">
                        <div class="rating-stars">★★★★☆</div>
                        <span class="rating-count">(86)</span>
                    </div>
                    <div class="product-price">
                        <span class="current-price">¥89.00</span>
                    </div>
                    <div class="product-buttons">
                        <button class="add-to-cart-btn add-to-cart" data-id="2" data-name="纯棉宽松T恤" data-price="89" data-image="https://picsum.photos/id/21/500/500">加入购物车</button>
                        <button class="view-details-btn">查看详情</button>
                    </div>
                </div>
            </div>
            
            <!-- 商品卡片 3 -->
            <div class="product-card">
                <div class="product-image">
                    <img src="https://picsum.photos/id/20/500/500" alt="商品图片">
                    <span class="product-discount">-15%</span>
                    <button class="product-favorite">🤍</button>
                </div>
                
                <div class="product-content">
                    <div class="product-category">家居生活</div>
                    <h3 class="product-title">北欧风格抱枕</h3>
                    <div class="product-rating">
                        <div class="rating-stars">★★★★★</div>
                        <span class="rating-count">(64)</span>
                    </div>
                    <div class="product-price">
                        <span class="current-price">¥59.00</span>
                        <span class="original-price">¥69.00</span>
                    </div>
                    <div class="product-buttons">
                        <button class="add-to-cart-btn add-to-cart" data-id="3" data-name="北欧风格抱枕" data-price="59" data-image="https://picsum.photos/id/20/500/500">加入购物车</button>
                        <button class="view-details-btn">查看详情</button>
                    </div>
                </div>
            </div>
            
            <!-- 商品卡片 4 -->
            <div class="product-card">
                <div class="product-image">
                    <img src="https://picsum.photos/id/24/500/500" alt="商品图片">
                    <button class="product-favorite">🤍</button>
                </div>
                
                <div class="product-content">
                    <div class="product-category">图书文具</div>
                    <h3 class="product-title">创意笔记本套装</h3>
                    <div class="product-rating">
                        <div class="rating-stars">★★★☆☆</div>
                        <span class="rating-count">(42)</span>
                    </div>
                    <div class="product-price">
                        <span class="current-price">¥49.00</span>
                    </div>
                    <div class="product-buttons">
                        <button class="add-to-cart-btn add-to-cart" data-id="4" data-name="创意笔记本套装" data-price="49" data-image="https://picsum.photos/id/24/500/500">加入购物车</button>
                        <button class="view-details-btn">查看详情</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 特色产品区域 -->
    <section class="featured-products" id="featured">
        <h2 class="section-title">特色产品</h2>
        
        <div class="products-container">
            <!-- 特色商品 1 -->
            <div class="product-card">
                <div class="product-image">
                    <img src="https://picsum.photos/id/160/500/500" alt="商品图片">
                    <span class="product-discount">-30%</span>
                    <button class="product-favorite">🤍</button>
                </div>
                
                <div class="product-content">
                    <div class="product-category">运动户外</div>
                    <h3 class="product-title">专业跑步运动鞋</h3>
                    <div class="product-rating">
                        <div class="rating-stars">★★★★★</div>
                        <span class="rating-count">(152)</span>
                    </div>
                    <div class="product-price">
                        <span class="current-price">¥349.00</span>
                        <span class="original-price">¥499.00</span>
                    </div>
                    <div class="product-buttons">
                        <button class="add-to-cart-btn add-to-cart" data-id="5" data-name="专业跑步运动鞋" data-price="349" data-image="https://picsum.photos/id/160/500/500">加入购物车</button>
                        <button class="view-details-btn">查看详情</button>
                    </div>
                </div>
            </div>
            
            <!-- 特色商品 2 -->
            <div class="product-card">
                <div class="product-image">
                    <img src="https://picsum.photos/id/96/500/500" alt="商品图片">
                    <button class="product-favorite">🤍</button>
                </div>
                
                <div class="product-content">
                    <div class="product-category">电子产品</div>
                    <h3 class="product-title">智能手表</h3>
                    <div class="product-rating">
                        <div class="rating-stars">★★★★☆</div>
                        <span class="rating-count">(98)</span>
                    </div>
                    <div class="product-price">
                        <span class="current-price">¥799.00</span>
                    </div>
                    <div class="product-buttons">
                        <button class="add-to-cart-btn add-to-cart" data-id="6" data-name="智能手表" data-price="799" data-image="https://picsum.photos/id/96/500/500">加入购物车</button>
                        <button class="view-details-btn">查看详情</button>
                    </div>
                </div>
            </div>
            
            <!-- 特色商品 3 -->
            <div class="product-card">
                <div class="product-image">
                    <img src="https://picsum.photos/id/145/500/500" alt="商品图片">
                    <span class="product-discount">-25%</span>
                    <button class="product-favorite">🤍</button>
                </div>
                
                <div class="product-content">
                    <div class="product-category">礼品鲜花</div>
                    <h3 class="product-title">精美花束礼盒</h3>
                    <div class="product-rating">
                        <div class="rating-stars">★★★★★</div>
                        <span class="rating-count">(78)</span>
                    </div>
                    <div class="product-price">
                        <span class="current-price">¥149.00</span>
                        <span class="original-price">¥199.00</span>
                    </div>
                    <div class="product-buttons">
                        <button class="add-to-cart-btn add-to-cart" data-id="7" data-name="精美花束礼盒" data-price="149" data-image="https://picsum.photos/id/145/500/500">加入购物车</button>
                        <button class="view-details-btn">查看详情</button>
                    </div>
                </div>
            </div>
            
            <!-- 特色商品 4 -->
            <div class="product-card">
                <div class="product-image">
                    <img src="https://picsum.photos/id/3/500/500" alt="商品图片">
                    <button class="product-favorite">🤍</button>
                </div>
                
                <div class="product-content">
                    <div class="product-category">家居生活</div>
                    <h3 class="product-title">迷你加湿器</h3>
                    <div class="product-rating">
                        <div class="rating-stars">★★★☆☆</div>
                        <span class="rating-count">(36)</span>
                    </div>
                    <div class="product-price">
                        <span class="current-price">¥79.00</span>
                    </div>
                    <div class="product-buttons">
                        <button class="add-to-cart-btn add-to-cart" data-id="8" data-name="迷你加湿器" data-price="79" data-image="https://picsum.photos/id/3/500/500">加入购物车</button>
                        <button class="view-details-btn">查看详情</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- 页脚 -->
    <footer class="footer">
        <div class="footer-container">
            <div class="footer-column">
                <div class="footer-logo">
                    <span class="logo-icon">🛒</span>
                    ShopEase
                </div>
                <p class="footer-description">
                    提供优质商品和卓越的购物体验，让您的生活更加便捷和美好。
                </p>
                <div class="footer-social">
                    <a href="#" class="social-link">📱</a>
                    <a href="#" class="social-link">🐦</a>
                    <a href="#" class="social-link">📸</a>
                    <a href="#" class="social-link">📘</a>
                </div>
            </div>
            
            <div class="footer-column">
                <h3 class="footer-heading">快速链接</h3>
                <ul class="footer-links">
                    <li><a href="#">首页</a></li>
                    <li><a href="#products">商品</a></li>
                    <li><a href="#categories">分类</a></li>
                    <li><a href="#featured">特色</a></li>
                    <li><a href="#">关于我们</a></li>
                </ul>
            </div>
            
            <div class="footer-column">
                <h3 class="footer-heading">客户服务</h3>
                <ul class="footer-links">
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">退换政策</a></li>
                    <li><a href="#">配送信息</a></li>
                    <li><a href="#">隐私政策</a></li>
                </ul>
            </div>
            
            <div class="footer-column">
                <h3 class="footer-heading">联系方式</h3>
                <ul class="footer-links">
                    <li><a href="#">客服电话: 400-123-4567</a></li>
                    <li><a href="#">邮箱: support@shopease.com</a></li>
                    <li><a href="#">地址: 北京市朝阳区建国路88号</a></li>
                </ul>
            </div>
        </div>
        
        <div class="footer-bottom">
            <p>&copy; 2024 ShopEase. 保留所有权利。</p>
        </div>
    </footer>
    
    <!-- 购物车侧边栏 -->
    <div class="cart-sidebar" id="cartSidebar">
        <div class="cart-header">
            <h3 class="cart-title">购物车 (0)</h3>
            <button class="close-cart" id="closeCart">✕</button>
        </div>
        
        <div class="cart-items" id="cartItems">
            <div class="cart-empty">
                <p>您的购物车是空的</p>
                <p>快去选购心仪的商品吧！</p>
            </div>
        </div>
        
        <div class="cart-footer">
            <div class="cart-summary">
                <div class="summary-row">
                    <span>小计</span>
                    <span>¥0.00</span>
                </div>
                <div class="summary-row">
                    <span>运费</span>
                    <span>¥0.00</span>
                </div>
                <div class="summary-row">
                    <span>总计</span>
                    <span class="summary-total">¥0.00</span>
                </div>
            </div>
            
            <button class="checkout-btn" disabled>去结算</button>
        </div>
    </div>
    
    <!-- 遮罩层 -->
    <div class="overlay" id="overlay"></div>
    
    <script>
        // 购物车功能
        document.addEventListener('DOMContentLoaded', function() {
            const cartBtn = document.getElementById('cartBtn');
            const closeCart = document.getElementById('closeCart');
            const cartSidebar = document.getElementById('cartSidebar');
            const overlay = document.getElementById('overlay');
            const cartItems = document.getElementById('cartItems');
            const cartCount = document.getElementById('cartCount');
            const cartTitle = document.querySelector('.cart-title');
            const checkoutBtn = document.querySelector('.checkout-btn');
            const summaryRows = document.querySelectorAll('.summary-row span:last-child');
            
            let cart = [];
            
            // 打开购物车
            cartBtn.addEventListener('click', function() {
                cartSidebar.classList.add('open');
                overlay.classList.add('active');
                document.body.style.overflow = 'hidden';
            });
            
            // 关闭购物车
            function closeCartSidebar() {
                cartSidebar.classList.remove('open');
                overlay.classList.remove('active');
                document.body.style.overflow = '';
            }
            
            closeCart.addEventListener('click', closeCartSidebar);
            overlay.addEventListener('click', closeCartSidebar);
            
            // 添加到购物车
            document.querySelectorAll('.add-to-cart').forEach(button => {
                button.addEventListener('click', function() {
                    const id = this.dataset.id;
                    const name = this.dataset.name;
                    const price = parseFloat(this.dataset.price);
                    const image = this.dataset.image;
                    
                    // 检查商品是否已在购物车中
                    const existingItemIndex = cart.findIndex(item => item.id === id);
                    
                    if (existingItemIndex !== -1) {
                        // 增加数量
                        cart[existingItemIndex].quantity++;
                    } else {
                        // 添加新商品
                        cart.push({
                            id,
                            name,
                            price,
                            image,
                            quantity: 1
                        });
                    }
                    
                    // 更新购物车
                    updateCart();
                    
                    // 添加按钮动画
                    this.textContent = '✓ 已加入';
                    this.style.backgroundColor = '#4ecdc4';
                    
                    setTimeout(() => {
                        this.textContent = '加入购物车';
                        this.style.backgroundColor = '';
                    }, 2000);
                });
            });
            
            // 更新购物车
            function updateCart() {
                // 更新购物车数量显示
                const totalItems = cart.reduce((total, item) => total + item.quantity, 0);
                cartCount.textContent = totalItems;
                cartTitle.textContent = `购物车 (${totalItems})`;
                
                // 更新购物车内容
                if (cart.length === 0) {
                    cartItems.innerHTML = `
                        <div class="cart-empty">
                            <p>您的购物车是空的</p>
                            <p>快去选购心仪的商品吧！</p>
                        </div>
                    `;
                    checkoutBtn.disabled = true;
                    summaryRows.forEach(row => row.textContent = '¥0.00');
                } else {
                    let html = '';
                    let subtotal = 0;
                    
                    cart.forEach(item => {
                        const itemTotal = item.price * item.quantity;
                        subtotal += itemTotal;
                        
                        html += `
                            <div class="cart-item" data-id="${item.id}">
                                <div class="cart-item-image">
                                    <img src="${item.image}" alt="${item.name}">
                                </div>
                                <div class="cart-item-details">
                                    <div class="cart-item-title">${item.name}</div>
                                    <div class="cart-item-price">¥${item.price.toFixed(2)}</div>
                                    <div class="cart-item-quantity">
                                        <button class="quantity-btn decrease-quantity" data-id="${item.id}">-</button>
                                        <span>${item.quantity}</span>
                                        <button class="quantity-btn increase-quantity" data-id="${item.id}">+</button>
                                    </div>
                                </div>
                                <button class="remove-item" data-id="${item.id}">✕</button>
                            </div>
                        `;
                    });
                    
                    cartItems.innerHTML = html;
                    checkoutBtn.disabled = false;
                    
                    // 更新小计和总计
                    summaryRows[0].textContent = `¥${subtotal.toFixed(2)}`;
                    summaryRows[2].textContent = `¥${subtotal.toFixed(2)}`;
                    
                    // 添加数量调整和删除事件
                    document.querySelectorAll('.decrease-quantity').forEach(button => {
                        button.addEventListener('click', function() {
                            const id = this.dataset.id;
                            const itemIndex = cart.findIndex(item => item.id === id);
                            
                            if (itemIndex !== -1) {
                                cart[itemIndex].quantity--;
                                
                                if (cart[itemIndex].quantity <= 0) {
                                    cart.splice(itemIndex, 1);
                                }
                                
                                updateCart();
                            }
                        });
                    });
                    
                    document.querySelectorAll('.increase-quantity').forEach(button => {
                        button.addEventListener('click', function() {
                            const id = this.dataset.id;
                            const itemIndex = cart.findIndex(item => item.id === id);
                            
                            if (itemIndex !== -1) {
                                cart[itemIndex].quantity++;
                                updateCart();
                            }
                        });
                    });
                    
                    document.querySelectorAll('.remove-item').forEach(button => {
                        button.addEventListener('click', function() {
                            const id = this.dataset.id;
                            const itemIndex = cart.findIndex(item => item.id === id);
                            
                            if (itemIndex !== -1) {
                                cart.splice(itemIndex, 1);
                                updateCart();
                            }
                        });
                    });
                }
            }
            
            // 收藏按钮功能
            document.querySelectorAll('.product-favorite').forEach(button => {
                button.addEventListener('click', function() {
                    if (this.textContent === '🤍') {
                        this.textContent = '❤️';
                        this.style.color = 'var(--primary-color)';
                    } else {
                        this.textContent = '🤍';
                        this.style.color = '';
                    }
                });
            });
            
            // 滚动时导航栏样式变化
            window.addEventListener('scroll', function() {
                const navbar = document.querySelector('.navbar');
                
                if (window.scrollY > 50) {
                    navbar.style.boxShadow = '0 4px 15px rgba(0, 0, 0, 0.1)';
                    navbar.style.padding = '5px 0';
                } else {
                    navbar.style.boxShadow = '0 2px 10px rgba(0, 0, 0, 0.1)';
                    navbar.style.padding = '0';
                }
            });
            
            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    
                    const targetId = this.getAttribute('href');
                    if (targetId === '#') return;
                    
                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        window.scrollTo({
                            top: targetElement.offsetTop - 80,
                            behavior: 'smooth'
                        });
                    }
                });
            });
            
            // 检查结算按钮
            checkoutBtn.addEventListener('click', function() {
                if (cart.length > 0) {
                    alert('结算成功！感谢您的购买。');
                    cart = [];
                    updateCart();
                    closeCartSidebar();
                }
            });
        });
    </script>
</body>
</html>
